<template>
  <dtDialog
    :title="modalTitle"
    :visible.sync="dialogVisible"
    :lock-scroll="false"
    :append-to-body="true"
    :is-loading="loading"
    @closeDialog="onModalClosed"
    @comfirmBtn="onSubmit()"
  >
    <el-form
      ref="form"
      slot="content"
      label-width="120px"
      :model="form"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="上游系统名称" prop="systemName">
            <el-input
              v-model.trim="form.systemName"
              maxlength="10"
              placeholder="请输入上游系统名称"
              show-word-limit
              class="limit"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="描述" prop="describeInfo">
            <el-input
              v-model.trim="form.describeInfo"
              placeholder="请输入描述"
              maxlength="200"
              rows="4"
              :autosize="{ minRows: 4, maxRows: 6 }"
              show-word-limit
              class="limit"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dtDialog>
</template>

<script>
import { addVideoSystem, editVideoSystem } from '@/api/videoFusion/upstreamAccess'

export default {
  data() {
    return {
      dialogVisible: false,
      action: '',
      loading: false,
      buttonLoading: false,
      form: {
        systemName: '',
        describeInfo: ''
      },
      rules: {
        systemName: [
          { required: true, message: '请输入上游系统名称', trigger: ['blur'] }
        ],
        describeInfo: [
          { required: true, message: '请输入描述', trigger: ['blur'] }
        ]
      }
    }
  },
  computed: {
    modalTitle() {
      let title = ''
      if (this.action === 'add') {
        title = '新增上游系统'
      } else if (this.action === 'edit') {
        title = '修改上游系统'
      }
      return title
    }
  },
  methods: {
    add() {
      this.dialogVisible = true
    },
    edit(row) {
      this.form.systemName = row.systemName
      this.form.describeInfo = row.describeInfo
      this.form.systemId = row.systemId
      this.dialogVisible = true
    },
    onModalClosed() {
      this.initModal()
      this.buttonLoading = false
    },
    initModal() {
      this.$refs.form.resetFields()
      this.form = {
        systemName: '',
        describeInfo: ''
      }
    },
    // 点击提交
    onSubmit() {
      // 校验表单
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.loading = true
          if (this.buttonLoading) {
            return
          }
          if (this.action === 'add') {
            this.buttonLoading = true
            addVideoSystem(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.$emit('success')
              this.dialogVisible = false
              this.buttonLoading = false
              this.loading = false
            }).finally(() => {
              this.loading = false
              this.buttonLoading = false
            })
          } else {
            this.buttonLoading = true
            editVideoSystem(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.$emit('success')
              this.dialogVisible = false
              this.buttonLoading = false
              this.loading = false
            }).finally(() => {
              this.loading = false
              this.buttonLoading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
